<template>
	<div style="width: 100%;height: 86vh;">
		<el-row :gutter="20" style="height: 100%;margin: 0;">
			<el-col :span="8" style="height: 100%;border: 1px solid lightgray;padding: 8px;">
				<el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini" clearable />
				<div style="height: 95%;overflow: auto;">
					<el-tree class="filter-tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode"
						node-key="id" ref="tree" highlight-current @node-click="handleNodeClick">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span>{{data.deptName}}</span>
						</span>
					</el-tree>
				</div>
			</el-col>
			<el-col :span="16" style="height: 100%;">
				<div style="display: flex;justify-content: right;">
					<el-button type="primary" size="mini" @click="addJg">新增下级机构</el-button>
					<el-button type="primary" size="mini">机构变动</el-button>
					<el-button type="primary" size="mini" @click="delJg">删除</el-button>
				</div>
				<div>

					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
						<el-row>
							<el-col span="12">
								<el-form-item label="机构名称" prop="deptName">
									<el-input v-model="ruleForm.deptName" placeholder="请输入内容" size="mini"></el-input>
								</el-form-item>
							</el-col>
							<el-col span="12">
								<el-form-item label="联系人" prop="jigoufuzeren">

									<el-input v-model="ruleForm.jigoufuzeren" placeholder="请输入内容"
										size="mini"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col span="12">
								<el-form-item label="统一社会信用代码" prop="jigoubianma">
									<el-input v-model="ruleForm.jigoubianma" placeholder="请输入内容" size="mini"></el-input>
								</el-form-item>
							</el-col>
							<el-col span="12">
								<el-form-item label="联系电话" prop="lianxidianhua">
									<el-input v-model="ruleForm.lianxidianhua" placeholder="请输入内容"
										size="mini"></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-form-item label="主管部门" prop="zgbmSelected">
							<el-cascader v-model="zgbmSelected" :options="zfOpts" @change="handleChange" size="mini"
								filterable :props="{ checkStrictly: true }" clearable></el-cascader>
						</el-form-item>

						<el-form-item label="详细地址" prop="xiangxidizhi">
							<el-input v-model="ruleForm.xiangxidizhi" placeholder="请输入内容" size="mini"></el-input>
						</el-form-item>


					</el-form>

					<div style="text-align: center;">
						<el-button type="primary" @click="submit">提交</el-button>
					</div>




				</div>


			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getTree,
		getZFTree,
		updateJg,
		addJg,
		delJg
	} from '@/api/user.js'


	export default {
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		methods: {
			filterNode(value, data) {
				if (!value) return true;
				return data.deptName.indexOf(value) !== -1;
			},
			init() {
				getTree({}).then(res => {
					if (res.code === 200) {
						this.treeData = res.data
					}
				})
			},
			setObjectPropertiesToNull(obj) {
				for (let key in obj) {
					obj[key] = null;
				}
				return obj;
			},
			getZF() {
				getZFTree().then(res => {
					if (res.code === 200) {
						this.zfOpts = res.data
					}
				})
			},
			delJg() {

				if (this.curNode.children && this.curNode.children.length > 0) {
					this.$message({
						message: '请先删除该企业下属企业',
						type: 'warning'
					})
					return
				}

				if (this.curNode.vehCnt === 0) {
					const param = {
						id: this.curNode.id
					}
					delJg(param).then(res => {
						if (res.code === 200) {
							const param = this.setObjectPropertiesToNull(this.ruleForm)
							this.ruleForm = param
							this.zgbmSelected = []
							this.init()
						}
					})
				} else {
					this.$message({
						message: '请先删除该企业所属车辆',
						type: 'warning'
					})
				}
			},
			addJg() {
				this.status = 'add'
				const param = this.setObjectPropertiesToNull(this.ruleForm)
				this.ruleForm = param
				this.ruleForm.parentId = this.curNode.id
				this.zgbmSelected = []
				console.log(this.ruleForm)

			},
			handleChange(value) {
				console.log(value);
				this.ruleForm.zgbmSelected = value
			},
			submit() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						if (this.status === 'edit') {
							updateJg(this.ruleForm).then(res => {
								if (res.code === 200) {
									this.init()
								}
							})
						} else if (this.status === 'add') {
							addJg(this.ruleForm).then(res => {
								if (res.code === 200) {
									this.init()
								}
							})
						}
					} else {
						return false;
					}
				});
			},
			handleNodeClick(data, node, evt) {
				console.log(data)
				this.status = 'edit'
				this.curNode = data
				this.ruleForm.deptName = data.deptName
				this.ruleForm.jigoufuzeren = data.jigoufuzeren
				this.ruleForm.jigoubianma = data.jigoubianma
				this.ruleForm.lianxidianhua = data.lianxidianhua
				this.ruleForm.xiangxidizhi = data.xiangxidizhi
				if (data.province && data.city && data.country) {
					this.zgbmSelected = [data.province, data.city, data.country]
				} else if (data.province && data.city) {
					this.zgbmSelected = [data.province, data.city]
				} else if (data.province) {
					this.zgbmSelected = [data.province]
				} else {
					this.zgbmSelected = []
				}

				this.ruleForm.zgbmSelected = this.zgbmSelected
				this.ruleForm.parentId = data.parentId
				this.ruleForm.id = data.id
			}

		},

		data() {
			return {
				filterText: null,
				treeData: [],
				status: 'edit',
				defaultProps: {
					label: 'deptName'
				},
				ruleForm: {
					deptName: null,
					jigoufuzeren: null,
					jigoubianma: null,
					lianxidianhua: null,
					xiangxidizhi: null,
					zgbmSelected: null,
					parentId: null,
					id: null
				},
				zfOpts: [],
				zgbmSelected: [],
				curNode: null,
				rules: {
					deptName: [{
						required: true,
						message: '请输入机构名称',
						trigger: 'blur'
					}],
					jigoufuzeren: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}],
					lianxidianhua: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}],
					xiangxidizhi: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur'
					}],
					zgbmSelected: [{
						required: true,
						message: '请选择主管部门',
						trigger: 'blur'
					}],
				}
			}

		},
		mounted() {
			this.init()
			this.getZF()
		}


	}
</script>

<style>
</style>